<template>
  <div class="doi-details-container"> 
    <div class="doi-details-content">
      <div class="spinner-container" v-if="loading">
        <div class="spinner"></div>
        <p>加载中...</p>
      </div>
      <div class="alert alert-info" v-else-if="!doiList.length">
        没有DOI信息
      </div>
      <div v-else>
 
        <div class="table-responsive">
          <table class="table table-sm">
            <thead>
              <tr>
                <th>#</th>
                <th width="300">DOI</th>
                <th width="400">标题</th>
                <th width="80">期刊</th>
                <th width="80">年份</th>
                <th>状态</th>
                <th>查看</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in doiList" :key="item.doi">
                <td>{{ index + 1 }}</td>
                <td><span class="doi-text">{{ item.doi }}</span></td>
                <td>{{ item.title || '' }}</td>
                <td>{{ item.journal || '' }}</td>
                <td>{{ item.year || '-' }}</td>
                <td>
                  <span :class="`badge ${getStatusBadgeClass(item.status)}`">
                    {{ getStatusText(item.status) }}
                  </span>
                </td>
                <td>
                  <a 
                    v-if="item.pdf_url" 
                    :href="item.pdf_url" 
                    class="btn btn-sm btn-outline-success" 
                    target="_blank"
                  >
                    <i class="bi bi-file-earmark-pdf"></i>
                  </a>
                  <div v-else style="width: 50px;"> &nbsp;</div>
                  
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
    <!-- 元数据模态框 -->
    <div class="modal fade" id="metadataModal" tabindex="-1" aria-hidden="true" ref="modalRef">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">论文详情</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="metadata-section" v-if="selectedMetadata">
              <h4 class="metadata-title">{{ selectedMetadata.title || '无标题' }}</h4>
              <p class="metadata-authors">{{ selectedMetadata.authors ? selectedMetadata.authors.join(', ') : '未知作者' }}</p>
              <p class="metadata-journal">{{ selectedMetadata.journal || '未知期刊' }} {{ selectedMetadata.year ? `(${selectedMetadata.year})` : '' }}</p>
              <hr>
              <div class="metadata-abstract">
                <strong>摘要:</strong> {{ selectedMetadata.abstract || '无摘要' }}
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            <a 
              :href="selectedItem?.pdf_url" 
              class="btn btn-primary" 
              target="_blank"
              v-if="selectedItem?.pdf_url"
            >
              下载论文
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 修改计算属性部分 -->
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useTaskStore } from '@/stores/taskStore';
import type { DoiItem } from '@/types';
import { Modal } from 'bootstrap';
import { exportTaskResults, exportToSourceFile } from '@/services/api';

const props = defineProps<{
  taskId: string;
}>();

const taskStore = useTaskStore();
const loading = ref(false);
const modalRef = ref<HTMLElement | null>(null);
const modal = ref<Modal | null>(null);
const selectedItem = ref<DoiItem | null>(null);

// 计算属性
const doiList = computed(() => {
  const task = taskStore.tasks.find(t => t.task_id === props.taskId);
  if (!task) return [];
  
  if (task.dois && task.dois.length > 0) {
    return task.dois;
  } else if (task.results && task.results.length > 0) {
    return task.results;
  }
  
  return [];
});

const selectedMetadata = computed(() => {
  return selectedItem.value?.metadata || null;
});

// 方法
function getStatusBadgeClass(status?: string): string {
  switch (status) {
    case 'success': return 'bg-success';
    case 'error': return 'bg-danger';
    case 'downloading': return 'bg-warning text-dark';
    default: return 'bg-secondary';
  }
}

function getStatusText(status?: string): string {
  switch (status) {
    case 'success': return '成功';
    case 'error': return '失败';
    case 'downloading': return '下载中';
    default: return '等待中';
  }
}



// 生命周期钩子
onMounted(() => {
  if (modalRef.value) {
    modal.value = new Modal(modalRef.value);
  }
});

</script>

<style scoped>
.doi-details-container {
  padding: 15px;
}

.doi-details-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.doi-text {
  font-family: monospace;
  font-size: 0.9rem;
}

.metadata-title {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.metadata-authors {
  font-style: italic;
  color: #666;
}

.metadata-journal {
  font-weight: 600;
  color: #333;
}

.metadata-abstract {
  line-height: 1.6;
  text-align: justify;
}
</style>